<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<script type="text/javascript" src="/layui/layui.js"></script>
</head>

<body>
	<div style="display: none;" id="editM">
		<input type="hidden" id="rid" />
		<div id="m_tree"></div>
	</div>
	<div id="my_div" style="display: none">
		<form id="my_form" class="layui-form" action="" lay-filter="form">
			<input name="Id" type="hidden">
			<div class="layui-form-item">


				<div class="layui-inline">
					<label class="layui-form-label">角色名</label>
					<div class="layui-input-inline">
						<input type="text" name="Name" autocomplete="off" class="layui-input">
					</div>
				</div>


				<div class="layui-inline">
					<div class="layui-input-inline">
						<button type="submit" class="layui-btn" lay-submit="" lay-filter="update"
							id="update">立即修改</button>
						<button type="submit" class="layui-btn" lay-submit="" lay-filter="add" id="add">立即添加</button>
					</div>
				</div>

			</div>

		</form>
	</div>

	<table id="demo" lay-filter="test"></table>

	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="editM">模块授权</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

	<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  </div>
</script>

	<script>
		layui.use(['table','tree', 'form', 'layer'], function () {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var $ = layui.$;
			var tree = layui.tree;
			//第一个实例
			table.render({
				elem: '#demo'
				, toolbar: '#toolbarDemo'
				, id: 'my_Tab'
				, url: '/roles/getRoles' //数据接口
				, page: true //开启分页
				, cols: [[ //表头
					, {field: 'Name', title: '角色名'}
					, {fixed: 'right', title: '操作', align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
				]]
			});
			//添加方法
			form.on('submit(add)', function (data) {
				$.post("/roles/insertRoles", $("#my_form").serialize(), function (res) {
					if (res.code == "0") {
						layer.closeAll();
						layer.msg("添加成功");
						table.reload("my_Tab");
					} else {
						layer.msg("用户名已存在");
					}
				}, "json");
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
			//添加弹出层
			//触发事件
			table.on('toolbar(test)', function (obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
					case 'add':
						console.log(obj);
						$("#update").hide();
						$("#add").show();
						$("#my_form")[0].reset();//清空编辑回显信息
						layer.open({
							type: 1,
							content: $("#my_div") //这里content是一个普通的String
						});
				};
			});

			//修改方法
			form.on('submit(update)', function (data) {
				$.post("/roles/updateRoles", $("#my_form").serialize(), function (res) {
					if (res.code == "0") {
						layer.closeAll();
						layer.msg("修改成功");
						table.reload("my_Tab");
					} else {
						layer.msg("用户名已存在");
					}
				}, "json");
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});


			//修改弹出层
			//工具条事件
			table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
				console.log(data);
				if (layEvent === 'edit') { //编辑
					form.val("form", data);
					$("#update").show();
					$("#add").hide();
					layer.open({
						type: 1,
						content: $("#my_div") //这里content是一个普通的String
					});

				}

				else if (layEvent === 'del') { //删除
					layer.confirm('真的删除行么', function (index) {
						$.post("/roles/delRoles", {
							Id: data.Id
						}, function (res) {
							if (res.code == "0") {
								layer.msg("删除成功");
								table.reload("my_Tab");
							} else {
								layer.msg(res.msg);
							}
						}, "json")
					});
				} else if (layEvent === 'editM') {
					$.post("/modules/getModuleByRid", {rid:data.Id}, function (res_data) {
						var inst1 = tree.render({
							elem: '#m_tree'  //绑定元素
							,showCheckbox:true
							, data: res_data
							,oncheck:function(robj){
								console.log(robj)
								var check = robj.checked;
								var elem = robj.elem;
								if(check){
									layer.msg("选中了 "+robj.data.title)
									$.post("/modules/addModuleByRid",{
										rid:data.Id
										,mid:robj.data.id
									},function(res){
										
										
									},"json")
								}else{
									layer.msg("取消选中 "+robj.data.title)
									$.post("/modules/delModuleByRid",{
										rid:data.Id
										,mid:robj.data.id
									},function(res){
										
										
									},"json")
								}
							}
						});

					}, "json")

					layer.open({
						type: 1
						, content: $("#editM")
						, area: ["500px", "500px"]
					})
				}

			});


		});
	</script>
</body>

</html>